<template>
    <div class="OrderCourse">
        <div class="nav">
            <el-input v-model="input" placeholder="请输入课程名" style="width: 250px; margin-top: 15px;" clearable
                @keyup.enter.native="handleQuery">
                <i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer; height: 10px;"
                    @click="handleQuery"></i>
            </el-input>
        </div>

        <div class="tab">
            <el-table style=" width: 85%; padding-top: 15px;" :data="tableData" stripe class="tableBox" :height="550">
                <el-table-column align="center" type="index" width="50"></el-table-column>

                <el-table-column align="center" prop="coursename" label="课程名称" width="100"></el-table-column>
                <el-table-column align="center" prop="coursetype" label="课程类型" width="100"></el-table-column>
                <el-table-column align="center" prop="jiaoshixingming" label="教师姓名" width="100"></el-table-column>
                <el-table-column align="center" prop="studentname" label="学生姓名" width="100"></el-table-column>
                <el-table-column align="center" prop="courseprice" label="课程价格" width="100"></el-table-column>
                <el-table-column align="center" prop="addtime" label="购买时间" width="160"></el-table-column>
                <el-table-column label=" 操作" width="130" align="center">
                    <template slot-scope="scope">
                        <el-button type="danger" size="mini" class="blueBug" @click="deleteStudy(scope.row.id)">
                            删 除 记 录
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页栏 -->
            <el-pagination class="pageList" :page-sizes="[4, 8, 12, 16]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="counts" :current-page.sync="page"
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
        </div>


    </div>
</template>

<script>
export default {
    name: 'OrderCourse',
    data() {
        return {
            input: "",
            tableData: [],
            //总数据条数
            counts: 0,
            //当前页
            page: 1,
            //每页条数
            pageSize: 4,
            imageUrl: "",
            stuId: "",
            a: "",
        }
    },
    mounted() {
        this.getTableData();
    },
    methods: {
        handleQuery() {
            this.getTableData();
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.page = 1;
            this.getTableData();
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getTableData();
        },
        getTableData() {
            const params = {
                params: {
                    page: this.page,
                    pageSize: this.pageSize,
                    name: this.input,
                }
            }
            this.axios.get("/student/order/page", params)
                .then(res => {
                    this.tableData = res.data.records;
                    this.counts = res.data.total;
                    console.log(this.tableData);
                })
        },
        deleteStudy(val) {
            this.$confirm('此操作会将该课程从学习课程中删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log(val);
                this.axios.delete("/orders/delete/" + val)
                    .then(res => {
                        if (res.data === "success") {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getTableData();
                        }
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },





    }
}

</script>
<style scoped>
.OrderCourse {
    width: 100%;
    height: 81vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);
}

.nav {
    width: 40%;
    height: 10%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;

    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 0.8px solid rgba(255, 255, 255, 0.18);
    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    border-radius: 19px;
    -webkit-border-radius: 19px;
    color: rgba(255, 255, 255, 0.75);
}

.nav .el-button {
    width: 170px;
    height: 50px;
    font-size: 18px;
    background: #fff;
    border: none;
    border-radius: 50px;
    font-family: mmmm;
    font-weight: 500;
    color: #000;
    outline: none;
    cursor: pointer;
    transition: all 0.4s;
}

.nav .el-button:hover {
    background-color: rgba(29, 201, 160, 0.08);
    border-color: #1DC9A0;
    color: #1DC9A0;
    transform: translateY(-5px) scale(1.05);
}

.nav .el-button:active {
    background-color: transparent;
    border-color: #1DC9A0;
    color: #1DC9A0;
    transform: translateY(5px) scale(0.95);
}

.nav .el-button:disabled {
    background-color: rgba(255, 255, 255, 0.16);
    color: #8E8E93;
    border-color: #8E8E93;
}

.tab {
    width: 70%;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;


    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 0.8px solid rgba(255, 255, 255, 0.18);
    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    border-radius: 19px;
    -webkit-border-radius: 19px;
    color: rgba(255, 255, 255, 0.75);

}

.tab>>>.el-table tr {
    background-color: transparent;
}

.tab>>>.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background-color: transparent;
}

.tab>>>.el-table th.el-table__cell {
    background-color: transparent;
}

.tableBox {
    background-color: transparent;
}

.pageList {
    margin-top: 10px;
    text-align: center;
}

.pageList>>>.el-pager li {
    background-color: transparent;
}
</style>